@use '~material-theme' as c;

$max-width: 1280px;
$width: 80%;

.client-header {
  padding: 3em 0 3em 10em;
  border-bottom: 1px solid c.mat-color(c.$foreground, divider-light);

  .fqdn-chips {
    display: flex;
    align-items: center;

    h1 {
      margin-bottom: 0;
    }

    .chips {
      margin-left: 1em;
      display: flex;
      flex-wrap: wrap;

      mat-chip {
        min-height: 26px;
        font-size: 12px;
        border: 1px solid c.mat-color(c.$foreground, divider);
        background-color: c.mat-color(c.$background, app-bar);
      }
    }
  }

  .os, .client-id {
    margin-bottom: .5em;
  }
}

.client-approval {
  border-bottom: 1px solid c.mat-color(c.$foreground, divider-light);
  approval {
    margin-left: auto;
    margin-right: auto;
    max-width: $max-width;
    width: $width;
  }
}

.client-start-flow {
  border-bottom: 1px solid c.mat-color(c.$foreground, divider-light);
  flow-form {
    margin-left: auto;
    margin-right: auto;
    max-width: $max-width;
    width: $width;
  }
}

.client-flows {
  background-color: c.mat-color(c.$background, darker-background);
  flow-list {
    margin-left: auto;
    margin-right: auto;
    max-width: $max-width;
    width: $width;
  }
}

mat-chip-list {
  /* mat-chip-list causes slight horizontal scrolling otherwise. */
  display: block;
  overflow: hidden;
}
